<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>发布电影信息</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
</head>
<body>
	<div id="publish">
			<form method="post" action="" onsubmit="return false">
				<div id="film">
					<div id="one">
						<span>电影名称：</span>
						<span><input type="text" class="input-text" name="fname" v-model="uf.fname"/></span>
					</div>
					<div id="one">
						<span>电影类型：</span>
						<span>
							<select class="input-text1" name="typename" style="width:100px; background-color:white;" @change="choose($event)">
								<option :value="item.tid" v-for="item in types">{{item.tname}}</option>
							</select>
						</span>
					</div>
					<div id="one">
						<span>主演：</span>
						<span><input type="text" class="input-text" name="actor" v-model="uf.actor"/></span>
					</div>
					<div id="one">
						<span>导演：</span>
						<span><input type="text" class="input-text" name="director" v-model="uf.director"/></span>
					</div>
					<div id="one">
						<span>价格：</span>
						<span>
							<input type="text" class="input-text" name="price" v-model="uf.tprice"/>
						</span>
					</div>
					<div id="one">
						<span></span>
						<span><input type="submit" class="input-button" name="submit" value="发布" @click="publishes()"/></span> 
					</div>
				</div>
			</form>
	</div>
</body>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/axios.js"></script>
<script type="text/javascript" src="js/qs.js"></script>
<script type="text/javascript" >
let app = new Vue({
	el: "#publish",
	data:{
		types: [],
		uf: {
			tid: "",
			fname: "",
			actor: "",
			director: "",
			tprice: ""
		}
	},
	mounted: function(){
		axios.get("types/finds").then(rt => {
			if(rt.status == 200 && rt.data.code == 200){
				this.types = rt.data.data;
			}
		})
	},
	methods: {
		choose(e){
			this.uf.tid = e.target.value;
		},
		publishes: function(){
			
			axios.post("info/add", qs.stringify({tid: this.uf.tid, fname: this.uf.fname, actor: this.uf.actor, director: this.uf.director, tprice: this.uf.tprice})).then( rt => {
				if(rt.status == 200 && rt.data.code == 200){
					alert("电影发布成功！");
				}else{
					alert("发布失败，请重新发送...");
				}
			})
		}
	}
	
})
</script>
</html>